/** 导航、面包屑、标签页样式重写 License By http://eleadmin.com */
@import 'var';

/** 导航 */
.el-menu {
  & > .el-menu-item, & > .el-submenu > .el-submenu__title {
    color: $--color-text-regular;
    background-color: transparent;
  }

  & > .el-menu-item.is-active, & > .el-submenu.is-active > .el-submenu__title {
    color: $--color-primary !important;
    background-color: transparent;
  }

  &.el-menu--horizontal {
    & > .el-menu-item:focus {
      color: inherit;
      background-color: transparent;
    }

    & > .el-menu-item:not(.is-disabled):hover, & > .el-submenu:not(.is-disabled) > .el-submenu__title:hover {
      background-color: rgba($--color-black, .02);
    }

    & > .el-submenu .el-submenu__icon-arrow {
      margin-left: 6px;
      margin-top: 0;
    }
  }

  .el-menu-item.is-disabled {
    opacity: 0.5;
  }

  .el-menu-item [class^="el-icon-"], .el-submenu > .el-submenu__title [class^="el-icon-"] {
    font-size: 17px;
    margin-right: 0;
    width: auto;

    & + span {
      margin-left: 5px;
    }
  }

  .el-menu-item i, .el-submenu__title i {
    color: inherit;
  }

  .el-submenu__icon-arrow {
    font-weight: 600;
    margin-top: -6px;
  }

  .el-submenu .el-menu {
    background-color: transparent;
  }

  .el-submenu .el-menu-item {
    min-width: auto;
  }

  /* 垂直导航 */
  &:not(.el-menu--horizontal) {
    .el-menu-item, .el-submenu__title {
      height: 40px;
      line-height: 40px;
      margin: 2px 0;

      &:not(.is-disabled):not(.is-active):hover {
        color: $--color-primary;
      }
    }

    .el-menu-item.is-active {
      border-right: 2px solid $--color-primary;
      background-color: rgba($--color-primary, .08);
    }

    .el-submenu__icon-arrow {
      right: 15px;
    }

    &.ele-menu-dark > .el-menu-item.is-active,
    &.ele-menu-dark .el-menu:not(.el-menu--popup) > .el-menu-item.is-active {
      color: #FFF !important;
      background-color: $--color-primary;
      border-right: none;
    }

    .el-menu-item [class^="el-icon-"] + span, .el-submenu > .el-submenu__title [class^="el-icon-"] + span {
      margin-left: 10px;
    }

    /* 折叠状态 */
    &.el-menu--collapse > .el-menu-item, &.el-menu--collapse > .el-submenu > .el-submenu__title {
      text-align: center;

      [class^="el-icon-"] + span {
        margin: 0;
      }
    }
  }
}

/* 暗色导航 */
.el-menu.ele-menu-dark, .ele-menu-dark > .el-menu--popup.el-menu {
  background-color: $--background-side-dark;
  border: none;

  & > .el-menu-item:focus, & > .el-submenu:focus > .el-submenu__title,
  .el-menu:not(.el-menu--popup) > .el-menu-item:focus,
  .el-menu:not(.el-menu--popup) > .el-submenu:focus > .el-submenu__title {
    color: rgba(255, 255, 255, 0.85);
  }

  & > .el-menu-item, & > .el-submenu > .el-submenu__title,
  .el-menu:not(.el-menu--popup) > .el-menu-item,
  .el-menu:not(.el-menu--popup) > .el-submenu > .el-submenu__title {
    color: rgba(255, 255, 255, 0.85);

    &:not(.is-disabled):not(.is-active):hover {
      color: #FFF;
    }
  }

  & > .el-menu-item.is-active, & > .el-submenu.is-active > .el-submenu__title,
  .el-menu:not(.el-menu--popup) > .el-menu-item.is-active,
  .el-menu:not(.el-menu--popup) > .el-submenu.is-active > .el-submenu__title {
    color: #FFF !important;
    border-color: #FFF;
  }
}

/* 导航弹出菜单 */
.el-menu--popup.el-menu {
  min-width: 160px;
  border-radius: 4px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2) !important;
  background-color: $--color-white !important;
  border: none !important;

  .el-menu-item, .el-submenu__title {
    height: 40px;
    line-height: 40px;
    color: $--color-text-regular;
    padding: 0 15px;
    margin: 0;
  }

  .el-menu-item.is-active {
    color: $--color-primary;
    background-color: rgba($--color-primary, .08);
    border-right: none;
  }

  .el-submenu__icon-arrow {
    right: 8px;
  }
}

.ele-menu-dark > .el-menu--popup.el-menu {
  background-color: $--background-side-dark !important;

  .el-menu-item.is-active {
    background-color: $--color-primary;
  }
}

/* 操作风格弹出菜单 */
.ele-menu-pop .el-menu--popup.el-menu {
  min-width: 120px;

  .el-menu-item.is-active {
    color: inherit !important;
    background-color: transparent;
  }

  .el-menu-item:hover, .el-submenu__title:hover {
    color: inherit !important;
    background-color: rgba($--color-black, .02);
  }
}

/** 面包屑 */
.el-breadcrumb__inner, .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
  color: $--color-text-secondary;
}

.el-breadcrumb__inner.is-link {
  color: $--color-text-regular;
  font-weight: 500;
}

/** 标签页 */
.el-tabs__header {
  margin: 0 !important;
}

.el-tabs__nav-wrap {
  margin-bottom: 0;

  &:after {
    height: 1px;
    background-color: $--border-color-lighter;
  }
}

.el-tabs--left .el-tabs__nav-wrap.is-left:after, .el-tabs--left .el-tabs__nav-wrap.is-right:after,
.el-tabs--right .el-tabs__nav-wrap.is-left:after, .el-tabs--right .el-tabs__nav-wrap.is-right:after {
  width: 1px;
}

.el-tabs__item {
  color: inherit;
  padding: 0 15px;
  transition: background-color .2s, color .2s, border-bottom-color .2s, border-top-color .2s, border-left-color .2s, border-right-color .2s;
}
